
<!DOCTYPE html>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.DateFormat"%>
<%@page import="org.hibernate.Session"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hệ thống quản lí thuốc online</title>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="../js/flex-admin/plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
	<div id="wrapper">
		<%@ include file="../../layout/menubar.jsp"%>
		<%@ include file="../../layout/left-menu.jsp"%>
		<%@ include file="../../layout/header.jsp"%>
		<div id="page-wrapper">
			<div class="page-content">

				<!-- begin PAGE TITLE ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="page-title">
							<ol class="breadcrumb">
								<li><i class="fa fa-dashboard"></i> Tạo hóa đơn</li>
							</ol>
						</div>
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
				<!-- end PAGE TITLE ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="portlet portlet-red">
							<div class="portlet-heading">
								<div class="portlet-title">
									<h4>Thông tin hóa đơn</h4>
								</div>
								<div class="portlet-widgets">
									<a data-toggle="collapse" data-parent="#accordion"
										href="#formControls" class=""><i
										class="fa fa-chevron-down"></i></a>
								</div>
								<div class="clearfix"></div>
							</div>
							<%
							DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
							Date date = new Date();
							String date_string = dateFormat.format(date);
							%>
							<div id="formControls" class="panel-collapse in"
								style="height: auto;">
								<div class="portlet-body">
									<form class="form-horizontal">
										<div class="form-group">
											<label for="textInput" class="col-sm-2 control-label">Ngày
												giờ</label>
											<div class="col-sm-10">
												<input type="date" class="form-control" id="thoigiantaohoadon" name="thoigiantaohoadon"
												 value="<%=date_string %>">
											</div>
										</div>
										<div class="form-group">
											<label for="textInputDisabled" class="col-sm-2 control-label">Tên
												cửa hàng</label>
											<div class="col-sm-10">
												<input class="form-control" id="tencuahang" name="tencuahang"
													value = "${storeName }" disabled="disabled"></input>
											</div>
										</div>
										<div class="form-group">
											<label for="textArea" class="col-sm-2 control-label">Số
												hóa đơn</label>
											<div class="col-sm-10">
												<input class="form-control" id="sohoadon" name="sohoadon"
													placeholder="Placeholder Text" disabled="disabled"></input>
											</div>
										</div>
										<div class="form-group">
											<label for="textAreaDisabled" class="col-sm-2 control-label">Người
												tạo</label>
											<div class="col-sm-10">
												<input class="form-control" id="nguoitaohoadon" name="nguoitaohoadon"
													value = "${userName}" disabled="disabled"></input>
											</div>
										</div>
										<div class="form-group">
											<label for="textAreaDisabled" class="col-sm-2 control-label">Tên
												khách hàng</label>
											<div class="col-sm-10">
												<input class="form-control" id="tenkhachhang" name="tenkhachhang"
													placeholder="Placeholder Text"></input>
											</div>
										</div>

									</form>
								</div>
							</div>
						</div>
						<!-- /.portlet -->
					</div>
				</div>
				<!-- begin ADVANCED TABLES ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="portlet portlet-default">
							<div class="portlet-heading">
								<div class="portlet-title">
									<h4>Đơn thuốc</h4>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="portlet-body">
								<div class="table-responsive">
									<div class="row form-group">
										
										<div class="col-sm-2 col-xs-12" style="margin-top: 25px">
											<button type="button" class="btn btn-default btn-square"
												data-toggle="modal" data-target="#modalMedicineList">Thêm Thuốc</button>
										</div>
										
										<div class="col-sm-6 hidden-xs"></div>
									</div>
									<form>
										<table id='danhsachcacthuocdachon'
											class='table table-striped table-bordered table-hover table-green'>
											<thead>
												<tr>
													<th>STT</th>
													<th>Tên thuốc</th>
													<th>Mô tả</th>
													<th>Số lượng</th>
													<th>Giá</th>
													<th>Thành tiền</th>
													<th>Xóa</th>
												</tr>
											</thead>

											<tbody id='tableBody'>
												

												

											</tbody>
										</table>
									</form>
								</div>
								<!-- /.table-responsive -->
							</div>
								<div class="portlet-footer">
											<button type="button"
												class="btn btn-default pull-right btn-square"
												onclick="xoamotthuoctrongdanhsach()" >
												<i class="fa fa-times"></i> Xóa
											</button>
									<div class="clearfix"></div>
								</div>
							<!-- /.portlet-body -->
						</div>
						<!-- /.portlet -->
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
				<div class="row">
					<div class="col-lg-12">
						<div class="portlet portlet-blue">
							<div class="portlet-heading">
								<div class="portlet-title">
									<h4>Tính tiền</h4>
								</div>
								<div class="portlet-widgets">
									<a data-toggle="collapse" data-parent="#accordion"
										href="#tien1" class=""><i class="fa fa-chevron-down"></i></a>
								</div>
								<div class="clearfix"></div>
							</div>
							<div id="tien1" class="panel-collapse in" style="height: auto;">
								<div class="portlet-body">
									<form class="form-horizontal">
										<div class="form-group">
											<label for="textInput" class="col-sm-2 control-label">Tổng
												tiền</label>
											<div class="col-sm-10">
												<input type="number" class="form-control"
													id="tongcongsotienkhachphaitra" placeholder="Tổng cộng"
													name = "tongcongsotienkhachphaitra"
													disabled="disabled" value="0">
											</div>
										</div>
										<div class="form-group">
											<label for="textInputDisabled" class="col-sm-2 control-label">Khách
												trả</label>
											<div class="col-sm-10">
												<input type="number"  class="form-control"
													id="tienkhachdua" placeholder="Tiền khách đưa" oninput="tinhtienthuachokhach()" value = 0
													>
											</div>
										</div>
										<div class="form-group">
											<label for="textArea" class="col-sm-2 control-label">Tiền
												thừa</label>
											<div class="col-sm-10">
												<input type="number" class="form-control"
													id="tienthua" placeholder="Tiền thừa" disabled="disabled" value = "0"
													>
											</div>
										</div>
									</form>
								</div>
								<div class="portlet-footer">
									<div class="row">
										<div class="col-sm-10">
											<button type="button"
												class="btn btn-default pull-right btn-square" onclick="addToDatabase()">
												<span class="glyphicon glyphicon-plus"></span>&nbsp;Lưu hóa
												đơn
											</button>
										</div>
										<div class="col-sm-2">
											<button type="button"
												class="btn btn-default pull-right btn-square">
												<span class="glyphicon glyphicon-plus"></span>&nbsp;In hóa
												đơn
											</button>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
								<!-- /.portlet-footer -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /.page-content -->
		</div>
		<!-- /#page-wrapper -->
		<!-- end MAIN PAGE CONTENT -->
		<div class="modal fade" id="modalMedicineList" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 1000px;">
				<div class="modal-content">
					<form action="create">
						<div class="modal-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="portlet portlet-default">
										<div class="portlet-heading">
											<div class="portlet-title">
												<h4>Các loại thuốc</h4>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="portlet-body">
											<div class="table-responsive">
												<table id="example-table"
													class="table table-striped table-bordered table-hover table-green">
													<thead>
														<tr>
															<th></th>
															<th>Tên thuốc</th>
															<th>Giá</th>
															<th>Số lượng trong kho</th>
															<th>Số lượng muốn mua</th>
															<th>Thành tiền</th>
															<td>Hành động</td>
														</tr>
													</thead>

													<tbody id='tableBody'>
														<%
															int j = 0;
														%>
														<c:forEach var="medicine" items="${medicines}">
															<tr>
																<%
																	j++;
																%>
																<td><%=j%></td>
																<td> ${medicine.getName()} </td>
																<td><input type="number" class="form-control"
																	id="dongia<%=j %>" value="${medicine.getPrice()}" disabled="disabled"></td>
																<td><input type="number" class="form-control"
																	id="soluongtrongkho<%=j %>" value="${medicine.getQuantity()}" disabled="disabled"></td>
																<td><input type="number" min="0" class="form-control"
																	id="soluongmua<%=j %>" oninput="nhapsoluongmua(<%=j %>)"  placeholder="Số Lượng" value = ""></td>
																<td><input type="number" class="form-control"
																	id="thanhtienthuocle<%=j %>" placeholder="Thành tiền" value=""
																	disabled="disabled"></td>
																<td>
																	<button type="button" class="btn btn-square btn-default" onclick = "muamotthuocle('${medicine.getName()}','${medicine.getDescription()}','${medicine.getPrice()}',<%=j %>)">Thêm</button>
																</td>
															</tr>
														</c:forEach>
													</tbody>
												</table>

											</div>
											<!-- /.table-responsive -->
										</div>
										<!-- /.portlet-body -->
									</div>
									<!-- /.portlet -->
								</div>
								<!-- /.col-lg-12 -->
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-square btn-default" data-dismiss="modal">Đóng</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var specialhtml = "<table id='danhsachcacthuocdachon' class='table table-striped table-bordered table-hover table-green'>"+
		"<thead><tr><th>STT</th><th>Tên thuốc</th><th>Mô tả</th><th>Số lượng</th><th>Giá</th><th>Thành tiền</th><th>Xóa</th>"+
			"</tr></thead><tbody id='tableBody'>";	
	var specialCount = 1;
	var nameArray;
	sohoadon();
	function sohoadon(){
		var now = new Date(); 
		var billnum = now.getDate() + "" + now.getHours() +"" + now.getMinutes() + "" + now.getSeconds();
		document.getElementById("sohoadon").value = billnum;
	}

	function editButtonTouched(name, description, price) {
		document.getElementById("billCreatedMedicineName").value = name;
		document.getElementById("billCreatedMedicineDesc").value = description;
		document.getElementById("billCreatedMedicinePrice").value = price;
	};
	
	function nhapsoluongmua(i){
		//alert(document.getElementById("soluongmua").value);
		var soluongtrongkho = parseInt(document.getElementById("soluongtrongkho"+i).value);
		var soluongmua =parseInt( document.getElementById("soluongmua"+i).value);
		if(soluongmua > soluongtrongkho){
			alert("Số lượng trong kho không đủ!");
			document.getElementById("soluongmua"+i).value = 0;
			document.getElementById("thanhtienthuocle"+i).value = 0;
		}else{
			var dongia =parseInt( document.getElementById("dongia"+i).value);
			var thanhtienle = dongia*soluongmua;
			document.getElementById("thanhtienthuocle"+i).value = thanhtienle;
		}
	}
	
	function muamotthuocle(tenthuoc,mota,gia,i){
		if(document.getElementById("soluongmua"+i).value!=null && document.getElementById("soluongmua"+i).value!='Số Lượng'
				&& document.getElementById("soluongmua"+i).value!=''){
			var soluongmua =parseInt(document.getElementById("soluongmua"+i).value);
			var thanhtien = gia*soluongmua;
			
			specialhtml += "<tr id = row"+specialCount+">"+
							"<td>"+specialCount+"</td>"+
							"<td>"+tenthuoc+"</td>"+
							"<td>"+mota+"</td>"+
							"<td>"+soluongmua+"</td>"+
							"<td>"+gia+"</td>"+
							"<td>"+thanhtien+"</td>"+
							"<td><input type='checkbox' name = 'thuocCheckbox' value ="+specialCount+"></td>"+
						"</tr>";
						
			document.getElementById("danhsachcacthuocdachon").innerHTML = specialhtml;
			specialCount++;
			
			var tongcongsotienkhachphaitra = parseInt(document.getElementById("tongcongsotienkhachphaitra").value);
			tongcongsotienkhachphaitra = tongcongsotienkhachphaitra + thanhtien;
			document.getElementById("tongcongsotienkhachphaitra").value = tongcongsotienkhachphaitra;
		}
		else{
			alert("Cần nhập số thuốc cần mua");
		}
	}
	
	function tinhtienthuachokhach(){
		var tongcongsotienkhachphaitra = parseInt(document.getElementById("tongcongsotienkhachphaitra").value);
		var tienkhachtra = parseInt(document.getElementById("tienkhachdua").value);
		var tienthua = tienkhachtra -tongcongsotienkhachphaitra;
		document.getElementById("tienthua").value = tienthua;
	}
	
	function xoamotthuoctrongdanhsach(){
	 	var thuocCheck = document.forms[2].thuocCheckbox;
	 	var item = "";
	 	var sh2 = "";
	 	for(var i = 0;i<thuocCheck.length;i++){
 			if (!thuocCheck[i].checked) {
	            var row = document.getElementById("row"+thuocCheck[i].value);
	            item += "<tr id = row"+thuocCheck[i].value+">"+row.innerHTML+"</tr>";
	        }
 		}
	 	//alert(item);
	 	specialhtml="";
	 	specialhtml = "<table id='danhsachcacthuocdachon' class='table table-striped table-bordered table-hover table-green'>"+
		"<thead><tr><th>STT</th><th>Tên thuốc</th><th>Mô tả</th><th>Số lượng</th><th>Giá</th><th>Thành tiền</th><th>Xóa</th>"+
		"</tr></thead><tbody id='tableBody'>";
		specialhtml += item;
	 	document.getElementById("danhsachcacthuocdachon").innerHTML=specialhtml;
	}
	function addToDatabase(){
		//gets table
		var nameOfMedicine="";
		var desc = "";
		var table = document.getElementById('danhsachcacthuocdachon');
		if(table.rows.length>1){
			for(var i=1;i<table.rows.length;i++){
				row = table.rows[i];
				col = row.cells[1];
				col2 = row.cells[3];
				nameOfMedicine += col.firstChild.nodeValue+",";
				desc += col.firstChild.nodeValue+":"+col2.firstChild.nodeValue+". \n";
			}
			var thoigiantaohoadon = document.getElementById("thoigiantaohoadon").value;
			var tencuahang = document.getElementById("tencuahang").value;
			var sohoadon = document.getElementById("sohoadon").value;
			var nguoitaohoadon = document.getElementById("nguoitaohoadon").value;
			var tenkhachhang = document.getElementById("tenkhachhang").value;
			var tongcongsotienkhachphaitra = document.getElementById("tongcongsotienkhachphaitra").value;
			var tenthuoc = nameOfMedicine;
			var description = desc;
			 $.ajax({
				   cache: false,
				   type: "GET",
				   url: "create",
				   data: {"thoigiantaohoadon":thoigiantaohoadon,
					   "tencuahang":tencuahang,
					   "sohoadon":sohoadon,
					   "nguoitaohoadon":nguoitaohoadon,
					   "tenkhachhang":tenkhachhang,
					   "tongcongsotienkhachphaitra":tongcongsotienkhachphaitra,
					   "tenthuoc":tenthuoc,
					   "description":description,
				   },
				   success: function (data) {
					   alert("Lưu hóa đơn thành công");
				   },
				   error: function(data){
				    alert("error");
				   }
				  })
		}
		else{
			alert("Không có thuốc được chọn");
		}
	}
</script>
</html>
